<template>
	<view>
		<view class="example-body">
			<view class="example-box">
				<uni-card :is-shadow="true" :title="result.designer.name" mode="style" :thumbnail="result.designer.photo"
				 note="true" @click="clickCard">
					<text class="content-box-text-info">
						  {{result.designer.synopsis}}
					</text>
					<block slot="footer">
						<view class="footer-box">
							<!-- <view class="" @click.stop="footerClick(designer.designer.synopsis)"><text class="footer-box__item"> 主页</text></view> -->
							<view class="" @click.stop="footerClick(result.designer.style)"><text class="footer-box__item"> 风格</text></view>
							<view class="" @click.stop="footerClick(result.designer.pricemini+ '元-' + result.designer.pricemax + '元/平方')"><text class="footer-box__item"> 服务价格</text></view>
						</view>
					</block>
				</uni-card>
			</view>
			<text class="example-info"></text>
			<uni-section title="热门作品" type="line"><text @click="pingjia(result.designer.designerId)">查看评价></text></uni-section>
			<view class="example-box"  v-for="work in result.works">
				<uni-card :is-shadow="true" mode="style" :thumbnail="work.pictureList[0].picPath" :extra="work.worksName" @click="clickCard">
					</br>
					<text class="content-box-text">
						  {{work.details}}
					</text>
				</uni-card>
			</view>
		</view>
		<view class="">
			<button type="primary"  class="button" @click="touchButton">咨询</button>
		</view>
		
	</view>
</template>

<script>
	import uniSection from '../../components/uni-section/uni-section.vue'
	import uniCard from '../../components/uni-card/uni-card.vue'
	export default {
		components: {
			uniSection,
			uniCard,
		},
		data() {
			return {
				id: "",
				result:{
					designer:{},
					works:{}
				}
				
			}

		},
		onLoad: function(data) {
			console.log(data);
			this.id = data.id;
			uni.request({
				url:"http://" + global.address + ":8081/designer/getdesignerInfo",
				method:"get",
				data:{
					id:this.id
				},
				success:(designers) => {
					this.result = designers.data;
					console.log(JSON.stringify(this.result.designer));
				}
			})
		},
		methods: {
			clickCard() {
				uni.showToast({
					title: '查看详情',
					icon: 'none'
				})
			},
			footerClick(types) {
				uni.showToast({
					title: types,
					icon: 'none'
				})
			},
			touchButton(){
				console.log(JSON.stringify(this.result.designer));
				uni.navigateTo({
					url:"/pages/message/chatpage?role=" + JSON.stringify(this.result.designer),
				})
			},
			pingjia(id){
				console.log(id)
				uni.navigateTo({
					url:"../PersonalCenter/pingjia?id="+id
				})
			}
			
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	.example {
		padding: 0 30rpx 30rpx;
	}

	.example-info {
	/* 	border: 1px solid gray; */
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 30rpx;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 30rpx;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 30rpx;
	}

	.example-info-text {
		font-size: 28rpx;
		line-height: 36rpx;
	}


	.example-body {
		flex-direction: column;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		padding: 20rpx 0;
		padding-bottom: 0;

	}

	.example-box {
		/* margin-bottom: 30rpx;
	*/
	}

	.image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		height: 350rpx;
		overflow: hidden;
	}

	.image {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1;
	}

	.content-box {
		padding-top: 20rpx;
	}

	.content-box-text {
		font-size: 35rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.content-box-text-info {
		font-size: 30rpx;

	}
	.footer-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-between;
		flex-direction: row;

	}

	.footer-box__item {
		align-items: center;
		padding: 10rpx 0;
		font-size: 30rpx;
		color: #666;

	}
	.button{
		background-color:#1CBBB4;
		width: 100%;
		margin-right: 0;
		position: fixed;  
		bottom: 0rpx;
	}
	
	.example-body{
		//距离顶部范围应该在118-122范围内
	    padding-bottom: 118upx; 
	 }
</style>
